<template>
  <div id="app">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="作业管理" name="first">
        <el-button type="primary" @click="openAddHomeworkDialog">添加作业</el-button>
        <el-table :data="homeworkList" border stripe style="width:100%"
          :header-cell-style="{ backgroundColor: '#409EFF', color: '#FFF', fontSize: '14px' }">
          <el-table-column label="序号" type="index" width="60px" align="center"></el-table-column>
          <el-table-column label="题目" prop="title" width="200px"></el-table-column>
          <el-table-column label="描述" prop="description" width="200px"></el-table-column>
          <el-table-column label="截止日期" prop="due_date" width="200px"></el-table-column>
          <el-table-column>
            <template #default="scope">
              <!-- <el-button @click="fetchHomeworkInfo(scope.row.id)" type="primary" circle>查看</el-button>
              <el-button @click="fetchHomeworkInfo(scope.row.id)" type="warning" circle>编辑</el-button> -->
              <el-button @click="deleteHomework(scope.row.id)" type="danger" circle>删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="错题管理" name="second">
        <el-button type="primary" @click="openAddQuestionDialog">添加错题</el-button>
        <el-table :data="questionList" border stripe style="width:100%"
          :header-cell-style="{ backgroundColor: '#409EFF', color: '#FFF', fontSize: '14px' }">
          <el-table-column label="序号" type="index" width="60px" align="center"></el-table-column>
          <el-table-column label="错题内容" prop="question_content" width="200px"></el-table-column>
          <el-table-column label="错题类型" prop="question_type" width="200px"></el-table-column>
          <el-table-column label="错误类型" prop="error_type" width="200px"></el-table-column>
          <el-table-column label="错题难度" prop="difficulty_level" width="200px"></el-table-column>
          <el-table-column>
            <template #default="scope">
              <!-- <el-button @click="viewDetail(scope.row.id)" type="primary" circle>查看</el-button>
              <el-button @click="viewEdit(scope.row.id)" type="warning" circle>编辑</el-button> -->
              <el-button @click="deleteQuestion(scope.row.id)" type="danger" circle>删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <!-- 添加家庭作业的弹出框 -->
    <el-dialog v-model="addHomeworkDialogVisible" width="30%" :show-close="true" draggable>
      <template #header>
        <div style="font-size: 18px; color: #409eff; font-weight: bold; text-align: left;">添加作业</div>
      </template>
      <el-form>
        <el-form-item label="题目:">
          <el-input v-model="newHomework.title" clearable placeholder="请输入题目"></el-input>
        </el-form-item>
        <el-form-item label="描述:">
          <el-input v-model="newHomework.description" clearable placeholder="请输入描述"></el-input>
        </el-form-item>
        <el-form-item label="截止日期：">
          <el-input v-model="newHomework.due_date" clearable placeholder="请输入截止日期"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeAddHomeworkDialog" type="primary">取消</el-button>
          <el-button @click="addHomework" type="primary">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 添加错题的弹出框 -->
    <el-dialog v-model="addQuestionDialogVisible" width="30%" :show-close="true" draggable>
      <template #header>
        <div style="font-size: 18px; color: #409eff; font-weight: bold; text-align: left;">添加错题</div>
      </template>
      <el-form>
        <el-form-item label="错题内容:">
          <el-input v-model="newQuestion.question_content" clearable placeholder="请输入错题内容"></el-input>
        </el-form-item>
        <el-form-item label="错题类型:">
          <el-select v-model="newQuestion.question_type" clearable placeholder="请选择错误类型">
            <el-option v-for="item in questionTypeList" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="错题难度：">
          <el-select v-model="newQuestion.difficulty_level" clearable placeholder="请选择错题难度">
            <el-option v-for="item in difficultyLevelList" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="错误类型：">
          <el-select v-model="newQuestion.error_type" clearable placeholder="请选择错误类型">
            <el-option v-for="item in errorTypeList" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeAddQuestionDialog" type="primary">取消</el-button>
          <el-button @click="addQuestion" type="primary">确定</el-button>
        </span>
      </template>
    </el-dialog>

  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      activeName: "first",
      newHomework: {
        title: '',
        description: '',
        due_date: ''
      },
      homeworkList: [],
      newQuestion: {
        question_type: '',
        question_subject: '',
        question_content: '',
        wrong_answer: '',
        correct_answer: '',
        error_type: '',
        difficulty_level: '',
      },
      questionTypeList: [
        { value: 'single', label: '单选题' },
        { value: 'multiple', label: '选择题' },
        { value: 'fillBlank', label: '填空题' },
        { value: 'shortAnswer', label: '简答题' },
        { value: 'matching', label: '连线题' }
      ],
      difficultyLevelList: [
        { value: '1', label: '简单★' },
        { value: '2', label: '较易★★' },
        { value: '3', label: '中等★★★' },
        { value: '4', label: '较难★★★★' },
        { value: '5', label: '困难★★★★★' }
      ],
      errorTypeList: [
        { value: '1', label: '计算错误' },
        { value: '2', label: '概念不清' },
      ],
      addQuestionDialogVisible: false,
      addHomeworkDialogVisible: false,
      questionList: []
    };
  },
  created() {
    this.fetchHomework();
    this.fetchQuestion();
  },
  methods: {
    fetchHomework() {
      axios.get('http://127.0.0.1:8000/api/homework/')
        .then(response => {
          this.homeworkList = response.data;
        })
        .catch(error => {
          console.error("获取作业失败:", error);
        });
    },
    openAddHomeworkDialog() {
      this.addHomeworkDialogVisible = true;
    },
    closeAddHomeworkDialog() {
      this.addHomeworkDialogVisible = false;
    },
    addHomework() {
      axios.post('http://127.0.0.1:8000/api/homework/', this.newHomework)
        .then(() => {
          this.fetchHomework();
          this.newHomework = { title: '', description: '', due_date: '' };
          this.addHomeworkDialogVisible = false;
        })
        .catch(error => {
          console.error("添加作业失败:", error);
        });
    },
    markCompleted(homeworkId) {
      axios.patch(`http://127.0.0.1:8000/api/homework/${homeworkId}/`, { completed: true })
        .then(() => {
          this.fetchHomework();
        })
        .catch(error => {
          console.error("标记作业失败:", error);
        });
    },
    deleteHomework(homeworkId) {
      axios.delete(`http://127.0.0.1:8000/api/homework/${homeworkId}/`)
        .then(() => {
          this.fetchHomework();
        })
        .catch(error => {
          console.error("删除作业失败:", error);
        });
    },
    fetchHomeworkInfo(homeworkId) {
      axios.get(`http://127.0.0.1:8000/api/homework/${homeworkId}/`)
        .then(response => {
          this.newHomework = response.data;
        })
        .catch(error => {
          console.error("查询作业失败:", error);
        });
    },
    fetchQuestion() {
      axios.get('http://127.0.0.1:8000/api/question/')
        .then(response => {
          this.questionList = response.data;
        })
        .catch(error => {
          console.error("获取错题列表失败:", error);
        });
    },
    addQuestion() {
      axios.post('http://127.0.0.1:8000/api/question/', this.newQuestion)
        .then(() => {
          this.fetchQuestion();
          this.newQuestion = {
            question_content: '',
            question_type: '',
            difficulty_level: ''
          };

          this.addQuestionDialogVisible = false;
        })
        .catch(error => {
          console.error("添加错题失败:", error);
        });
    },
    deleteQuestion(questionId) {
      axios.delete(`http://127.0.0.1:8000/api/question/${questionId}/`)
        .then(() => {
          this.fetchQuestion();
        })
        .catch(error => {
          console.error("删除错题失败:", error);
        });
    },
    openAddQuestionDialog() {
      this.addQuestionDialogVisible = true;
    },
    closeAddQuestionDialog() {
      this.addQuestionDialogVisible = false;
    },
    handleClick() {
      // console.error("tab:", tab.name);
    },
  },
  // watch: {
  //   activeName(newVal) {
  //     console.log('当前激活的标签页name:', newVal);
  //     this.activeName = newVal;
  //   },
  // },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  margin-top: 20px;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  margin: 10px 0;
}
</style>